<template>
    <div class="app-container">
        <el-table :data="examList" v-loading="loading">
            <el-table-column
                align="center"
                label="考试时长"
                prop="examDuration"
                :formatter="formatDuring"
            >
            </el-table-column>
            <el-table-column
                align="center"
                label="单选题得分"
                prop="singleScore"
            >
            </el-table-column>
            <el-table-column
                align="center"
                label="判断题得分"
                prop="judgeScore"
            />
            <el-table-column
                align="center"
                label="多选题得分"
                prop="multipleScore"
            />
            <el-table-column
                align="center"
                label="合格分数"
                prop="passingScore"
            />
            <el-table-column
                align="center"
                label="试卷总分"
                prop="totalScore"
            />
            <el-table-column align="center" label="考试状态" prop="examState">
                <template slot-scope="scope">
                    {{ scope.row.examState == 0 ? "未考试" : "已考试" }}
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="成绩"
                prop="examState"
                v-if="examState == 1"
            >
                <template slot-scope="scope">
                    {{
                        scope.row.singleScore +
                            scope.row.judgeScore +
                            scope.row.multipleScore >=
                        scope.row.passingScore
                            ? "合格"
                            : "不合格"
                    }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150">
                <template>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-search"
                        @click="dialogVisible = true"
                        >查看详情</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!--答题记录 详情-->
        <el-dialog title="答题记录" :visible.sync="dialogVisible" width="900px">
            <el-table :data="currentExamList">
                <el-table-column align="center" label="序号" type="index">
                </el-table-column>
                <el-table-column align="center" label="题干" width="400">
                    <template slot-scope="scope">
                        <el-popover
                            placement="right"
                            width="400"
                            trigger="hover"
                        >
                            <div>
                                <div class="history-preview">
                                    <label>试题内容:</label>
                                    <div>
                                        <p v-html="scope.row.title"></p>
                                    </div>
                                </div>
                                <div class="history-preview">
                                    <label>选项:</label>
                                    <div>
                                        <div
                                            v-for="(data, index) in scope.row
                                                .options"
                                            :key="index"
                                            class="question-content"
                                        >
                                            <div>
                                                <span style="margin-right:5px;"
                                                    >{{ data.item }} .</span
                                                >
                                                <p
                                                    v-if="data.itemDesc"
                                                    v-html="data.itemDesc"
                                                ></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p
                                v-html="scope.row.title"
                                style="cursor: pointer;"
                                slot="reference"
                            ></p>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="用户答案">
                    <template slot-scope="scope">
                        {{ scope.row.userAnswer }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="试题答案">
                    <template slot-scope="scope">
                        {{ scope.row.varAnswer }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="试题解析">
                    <template slot-scope="scope">
                        <span>{{ scope.row.varAnalysis }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="currentPage"
                :limit.sync="pageSize"
                @pagination="changePage"
            />
        </el-dialog>
    </div>
</template>
<script>
import { formatDuring } from '@/utils/validate'
import { getProjectExamRecord } from '@/api/system/train'
export default {
    name: 'answerHistory',
    data () {
        return {
            queryParams: {
                projectId: '',
                userId: ''
            },
            examState: 0,// 0，未考试 1，已考试
            total: 0,
            examList: [], // 试题列表
            examInfoList: [], // 答题记录列表
            currentExamList: [], // 当前要展示的10条数据
            dialogVisible: false,
            loading: false, // 初始化进来页面loading
            allQuestionArr: [],
            currentPage: 1, // 弹出层列表分页 当前在第几页
            pageSize: 5, // 弹出层列表分页 每页十条
        }
    },
    created () {
        this.queryParams.projectId = this.$route.query.projectId
        this.queryParams.userId = this.$route.query.userId
        this.formatDuring = formatDuring
        this.getList()
    },
    methods: {
        getList () {
            this.loading = true
            getProjectExamRecord(this.queryParams).then(res => {
                this.examState = res.data.examState
                this.examList = [res.data]
                this.total = res.data.topics.length
                this.allQuestionArr = res.data.topics
                this.currentExamList = this.allQuestionArr.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        changePage () {
            this.currentExamList = this.allQuestionArr.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        }
    }
}
</script>